<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div>
            <el-row :gutter="4">
              <el-form :inline="true" label-width="70px">
                <el-form-item label="表名:">
                  <el-select v-model="searchDto.tableName" placeholder="请选择">
                    <el-option
                      v-for="item in tableList"
                      :key="item.tableName"
                      :label="item.tableComment"
                      :value="item.tableName"
                    >
                      <span
                        style="float: left;margin-right:10px;font-weight: bold"
                      >
                        {{ item.tableName }}
                      </span>
                      <span style="float: right;">{{ item.tableComment }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getPageData"
                    >查询
                  </el-button>
                  <el-button type="primary" icon="el-icon-s-open" @click="clear"
                    >重置
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newExport"
                    >新建模板
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table-content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="tableName"
                label="表名"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="fieldName"
                align="center"
                label="字段名"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.type | keyText("EXPORT_FIELD_TYPE") }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容"
                align="center"
                width="400"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                width="200"
                label="管理"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      type="button"
                      size="mini"
                      icon="el-icon-edit"
                      @click="editExport(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delExport(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
            <el-dialog
            :close-on-click-modal="false"
              :visible.sync="showExportStatus"
              title="新增/编辑模板:"
              width="35%"
              @close="fail"
            >
              <el-row>
                <el-col :span="24">
                  <el-form
                    ref="form"
                    :model="formInfo"
                    :rules="rules"
                    label-width="90px"
                  >
                    <el-form-item label="表名:" prop="tableName">
                      <el-select
                        v-model="formInfo.tableName"
                        placeholder="请选择"
                        @change="typeChange"
                      >
                        <el-option
                          v-for="item in tableList"
                          :key="item.tableName"
                          :label="item.tableComment"
                          :value="item.tableName"
                        >
                          <span
                            style="float: left;margin-right:10px;font-weight: bold"
                          >
                            {{ item.tableName }}
                          </span>
                          <span style="float: right;">
                            {{ item.tableComment }}
                          </span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="字段名:" prop="fieldName">
                      <el-select
                        v-model="formInfo.fieldName"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in fieldList"
                          :key="item.columnName"
                          :label="item.columnComment"
                          :value="item.columnName"
                        >
                          <span
                            style="float: left;margin-right:10px;font-weight: bold"
                          >
                            {{ item.columnName }}
                          </span>
                          <span style="float: right;">
                            {{ item.columnComment }}
                          </span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="类型:" prop="type">
                      <el-select v-model="formInfo.type" placeholder="请选择">
                        <el-option
                          v-for="item in exportTypes"
                          :key="item.keyword"
                          :label="item.label"
                          :value="item.keyword"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="内容:" prop="content">
                      <el-input
                        v-model="formInfo.content"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入模板内容"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <div slot="footer">
                <el-button type="primary" @click="saveExport">
                  保存
                </el-button>
                <el-button @click="fail">
                  取消
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import _ from "lodash";

export default {
  created() {
    this.getPageData();
    this.getTable();
  },
  data() {
    return {
      rules: {
        tableName: [
          { required: true, message: "请输入表名称", trigger: "blur" }
        ],
        fieldName: [
          { required: true, message: "请输入字段名称", trigger: "blur" }
        ],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }]
      },
      exportTypes: this.getDictionary("EXPORT_FIELD_TYPE"), //导出模板字段类型
      formInfo: {
        id: "",
        tableName: "",
        fieldName: "",
        type: "",
        content: ""
      },
      showExportStatus: false,
      loading: false,
      searchDto: {
        tableName: "",
        pageIndex: "",
        pageSize: 10
      },
      pageData: {},
      tableList: {}, //表数据
      fieldList: {} //字段数据
    };
  },
  methods: {
    //查询模板导出配置（分页）
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getExportSettingPageList(tem).then(ret => {
        this.pageData = ret.data;
        console.log("pageData", ret.data);
      });
    },
    //获取所有表
    getTable() {
      this.API.getWorkflowTableList().then(ret => {
        this.tableList = ret.data;
      });
    },
    //表修改重新获取字段
    typeChange(val) {
      this.formInfo.fieldName = "";
      this.getField(val);
    },
    //获取字段列表
    getField(val) {
      console.log(val);
      let tem = { tableName: val };
      this.API.getWorkflowTableFieldList(tem).then(ret => {
        this.fieldList = ret.data;
      });
    },
    //清空搜索条件
    clear() {
      this.searchDto = {
        tableName: "",
        pageIndex: "",
        pageSize: 10
      };
      this.getPageData(1);
    },
    //关闭弹窗
    fail() {
      this.formInfo = {
        id: "",
        tableName: "",
        fieldName: "",
        type: "",
        content: ""
      };
      this.fieldList = {};
      this.showExportStatus = false;
    },
    //点击新增
    newExport() {
      this.showExportStatus = true;
    },
    //删除模板
    delExport(row) {
      this.$confirm("确认删除当前模板?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteExportSettingById(tem).then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    //点击编辑
    editExport(row) {
      this.formInfo = _.clone(row);
      this.getField(this.formInfo.tableName);
      this.showExportStatus = true;
    },
    //编辑/新增确认
    saveExport() {
      let tem = { body: this.formInfo };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateExportSetting(tem).then(ret => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getPageData();
            this.showExportStatus = false;
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style scoped></style>
